[V0_FILE]typescriptreact:file="TweetGLSLVisualization.tsx" isQuickEdit="true" "use client" import type React from "react" import { useRef, useEffect, useState, useCallback } from "react" import * as THREE from "three" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" // Define color themes interface ColorTheme { name: string baseHue: number accentHue: number saturation: number brightness: number color: string // For the theme selector UI } const colorThemes: ColorTheme[] = [ { name: "Original", baseHue: 0.856, accentHue: 0.5, saturation: 0.6, brightness: 1.5, color: "#ff7700" }, { name: "Cool Blue", baseHue: 0.6, accentHue: 0.7, saturation: 0.7, brightness: 1.4, color: "#0077ff" }, { name: "Neon Green", baseHue: 0.3, accentHue: 0.4, saturation: 0.8, brightness: 1.6, color: "#00ff77" }, { name: "Hot Pink", baseHue: 0.9, accentHue: 0.95, saturation: 0.75, brightness: 1.5, color: "#ff00aa" }, { name: "Purple Haze", baseHue: 0.75, accentHue: 0.65, saturation: 0.7, brightness: 1.4, color: "#8800ff" }, { name: "Sunset", baseHue: 0.05, accentHue: 0.1, saturation: 0.8, brightness: 1.5, color: "#ff5500" }, { name: "Black", baseHue: 0.0, accentHue: 0.1, saturation: 0.2, brightness: 0.8, color: "#222222" }, { name: "Gold", baseHue: 0.12, accentHue: 0.14, saturation: 0.9, brightness: 1.7, color: "#ffcc00" }, ] export default function TweetGLSLVisualization() { const containerRef = useRef(null) const audioRef = useRef(null) const audioContextRef = useRef(null) const analyserRef = useRef(null) const sourceRef = useRef(null) const frequencyDataRef = useRef(new Uint8Array(128)) const beatValueRef = useRef(0) const smoothedBeatRef = useRef(0) const beatThresholdRef = useRef(0.06) const energyHistoryRef = useRef([]) const startTimeRef = useRef(Date.now()) const rendererRef = useRef(null) const sceneRef = useRef(null) const cameraRef = useRef(null) const controlsRef = useRef(null) const spheresRef = useRef([]) const shaderMaterialsRef = useRef([]) const sphereGroupRef = useRef(null) const animationRef = useRef(null) const [isPlaying, setIsPlaying] = useState(false) const [audioLoaded, setAudioLoaded] = useState(false) const [audioError, setAudioError] = useState(null) const [beatSensitivity, setBeatSensitivity] = useState(2.5) const [beatEffect, setBeatEffect] = useState(0.35) const [showControls, setShowControls] = useState(true) const [selectedTheme, setSelectedTheme] = useState(colorThemes[0]) // Default to first theme // Setup audio useEffect(() => { const audio = audioRef.current if (!audio) return audio.crossOrigin = "anonymous" audio.preload = "auto" const handleCanPlay = () => { console.log("Audio can play") setAudioLoaded(true) } const handleError = (e: Event) => { console.error("Audio error:", e) setAudioError("Failed to load audio") } audio.addEventListener("canplay", handleCanPlay) audio.addEventListener("error", handleError) return () => { audio.removeEventListener("canplay", handleCanPlay) audio.removeEventListener("error", handleError) } }, []) // Handle play button click const handlePlayButtonClick = () => { const audio = audioRef.current if (!audio) return if (audio.paused) { if (!audioContextRef.current) { try { const AudioContext = window.AudioContext || (window as any).webkitAudioContext audioContextRef.current = new AudioContext() analyserRef.current = audioContextRef.current.createAnalyser() analyserRef.current.fftSize = 1024 analyserRef.current.smoothingTimeConstant = 0.4 frequencyDataRef.current = new Uint8Array(analyserRef.current.frequencyBinCount) sourceRef.current = audioContextRef.current.createMediaElementSource(audio) sourceRef.current.connect(analyserRef.current) analyserRef.current.connect(audioContextRef.current.destination) console.log("Audio context initialized successfully") } catch (error) { console.error("Failed to initialize audio context:", error) setAudioError("Failed to initialize audio") return } } if (audioContextRef.current.state === "suspended") { audioContextRef.current.resume() } audio .play() .then(() => { console.log("Audio playing successfully") setIsPlaying(true) setAudioError(null) energyHistoryRef.current = [] beatValueRef.current = 0 smoothedBeatRef.current = 0 }) .catch((error) => { console.error("Error playing audio:", error) setAudioError("Failed to play audio") }) } else { audio.pause() setIsPlaying(false) } } // Improved beat detection const detectBeat = useCallback(() => { if (!analyserRef.current) return 0 analyserRef.current.getByteFrequencyData(frequencyDataRef.current) const bassRange = [1, 6] let bassEnergy = 0 for (let i = bassRange[0]; i < bassRange[1]; i++) { bassEnergy += frequencyDataRef.current[i] } bassEnergy /= (bassRange[1] - bassRange[0]) * 255 energyHistoryRef.current.push(bassEnergy) if (energyHistoryRef.current.length > 15) { energyHistoryRef.current.shift() } const avgEnergy = energyHistoryRef.current.reduce((sum, val) => sum + val, 0) / energyHistoryRef.current.length const dynamicThreshold = avgEnergy * 1.03 if (bassEnergy > dynamicThreshold && bassEnergy > beatThresholdRef.current) { beatValueRef.current = Math.min(bassEnergy * beatSensitivity, 1) } else { beatValueRef.current *= 0.85 } const interpolationFactor = 0.2 smoothedBeatRef.current += (beatValueRef.current - smoothedBeatRef.current) * interpolationFactor return smoothedBeatRef.current }, [beatSensitivity]) // Create stars with more density and varied sizes const createStars = useCallback((scene: THREE.Scene) => { // Create multiple star layers for depth effect // Background stars (numerous, smaller) const backgroundStarsGeometry = new THREE.BufferGeometry() const backgroundStarsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.12, transparent: true, opacity: 0.7, sizeAttenuation: true, }) const backgroundStarsVertices = [] for (let i = 0; i < 25000; i++) { const x = (Math.random() - 0.5) * 2000 const y = (Math.random() - 0.5) * 2000 const z = (Math.random() - 0.5) * 2000 backgroundStarsVertices.push(x, y, z) } backgroundStarsGeometry.setAttribute("position", new THREE.Float32BufferAttribute(backgroundStarsVertices, 3)) const backgroundStars = new THREE.Points(backgroundStarsGeometry, backgroundStarsMaterial) scene.add(backgroundStars) // Foreground stars (fewer, larger, brighter) const foregroundStarsGeometry = new THREE.BufferGeometry() const foregroundStarsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.25, transparent: true, opacity: 0.9, sizeAttenuation: true, }) const foregroundStarsVertices = [] for (let i = 0; i < 2000; i++) { const x = (Math.random() - 0.5) * 1000 const y = (Math.random() - 0.5) * 1000 const z = (Math.random() - 0.5) * 1000 foregroundStarsVertices.push(x, y, z) } foregroundStarsGeometry.setAttribute("position", new THREE.Float32BufferAttribute(foregroundStarsVertices, 3)) const foregroundStars = new THREE.Points(foregroundStarsGeometry, foregroundStarsMaterial) scene.add(foregroundStars) // Extra bright stars (very few, largest) const brightStarsGeometry = new THREE.BufferGeometry() const brightStarsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.4, transparent: true, opacity: 1.0, sizeAttenuation: true, }) const brightStarsVertices = [] for (let i = 0; i < 200; i++) { const x = (Math.random() - 0.5) * 500 const y = (Math.random() - 0.5) * 500 const z = (Math.random() - 0.5) * 500 brightStarsVertices.push(x, y, z) } brightStarsGeometry.setAttribute("position", new THREE.Float32BufferAttribute(brightStarsVertices, 3)) const brightStars = new THREE.Points(brightStarsGeometry, brightStarsMaterial) scene.add(brightStars) return [backgroundStars, foregroundStars, brightStars] }, []) // Initialize Three.js scene useEffect(() => { if (!containerRef.current) return // Create scene const scene = new THREE.Scene() scene.background = new THREE.Color(0x000000) // Black background sceneRef.current = scene // Create a parent group for all spheres const sphereGroup = new THREE.Group() scene.add(sphereGroup) sphereGroupRef.current = sphereGroup // Create camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) camera.position.z = 18 cameraRef.current = camera // Create renderer const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(window.devicePixelRatio) containerRef.current.appendChild(renderer.domElement) rendererRef.current = renderer // Add orbit controls const controls = new OrbitControls(camera, renderer.domElement) controls.enableDamping = true controls.dampingFactor = 0.05 controlsRef.current = controls // Add stars createStars(scene) // Vertex shader source const vertexShaderSource = ` varying vec2 vUv; varying vec3 vPosition; varying vec3 vNormal; void main() { vUv = uv; vPosition = position; vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ` // Fragment shader source const fragmentShaderSource = ` precision highp float; varying vec2 vUv; varying vec3 vPosition; varying vec3 vNormal; uniform float time; uniform float beat; uniform float beatEffect; uniform float baseHue; uniform float accentHue; uniform float themeSaturation; uniform float themeBrightness; uniform vec2 resolution; #define R rotate2D mat2 rotate2D(float angle) { float s = sin(angle); float c = cos(angle); return mat2(c, -s, s, c); } vec3 hsv(float h, float s, float v) { vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0); vec3 p = abs(fract(vec3(h) + K.xyz) * 6.0 - vec3(K.w)); return v * mix(vec3(K.x), clamp(p - vec3(K.x), 0.0, 1.0), s); } void main() { // Map sphere coordinates to 2D space for the effect // Improved mapping to cover the entire sphere without distortion at poles vec2 p; float phi = acos(vNormal.y); float theta = atan(vNormal.z, vNormal.x); p.x = 0.5 + 0.5 * theta / 3.14159; p.y = phi / 3.14159; // Apply beat-reactive distortion to coordinates float zoomFactor = beat * beatEffect * 0.08; vec2 center = vec2(0.5, 0.5); vec2 zoomedCoord = mix(p, center, zoomFactor); vec2 l = (zoomedCoord + zoomedCoord - vec2(1.0)) * 0.5 + vec2(-0.15, 0.1); vec2 n; float s = 6.0; float h = 0.0; float i = 0.0; float L = dot(l + 1.8, l); float e = 129.0; // Apply stronger scaling effect based on beat float scaleFactor = 1.0 + beat * beatEffect * 0.06; s *= scaleFactor; for(; i < e; i++) { // Keep original rotation l *= R(4.95); // Keep original rotation for n n *= R(4.8 + sin(time) * 0.05); h += dot(vec2(1.0), sin(l * s * i + n) / s * 4.0); n += cos(l * s * i + n); s *= 1.05; } h = 0.4 - h * 0.26 - L; // Smoothly shift hue based on beat intensity and selected theme float hueShift = mix(baseHue, accentHue, beat * beatEffect * 0.8); // Original color with stronger beat influence and hue shift float beatBoost = 1.0 + beat * beatEffect * 0.4; // Add normal-based lighting effect float lightIntensity = max(0.2, dot(vNormal, normalize(vec3(1.0, 1.0, 1.0)))); vec3 color = 1.2 - hsv(ceil(h) * hueShift, h * themeSaturation, themeBrightness * beatBoost * lightIntensity); gl_FragColor = vec4(color, 1.0); } ` // Create spheres for each theme const spheres: THREE.Mesh[] = [] const shaderMaterials: THREE.ShaderMaterial[] = [] // Calculate positions in a circle const radius = 8 const numSpheres = colorThemes.length for (let i = 0; i < numSpheres; i++) { const angle = (i / numSpheres) * Math.PI * 2 const x = Math.cos(angle) * radius const z = Math.sin(angle) * radius // Create shader material const material = new THREE.ShaderMaterial({ vertexShader: vertexShaderSource, fragmentShader: fragmentShaderSource, uniforms: { time: { value: 0.0 }, beat: { value: 0.0 }, beatEffect: { value: beatEffect }, baseHue: { value: colorThemes[i].baseHue }, accentHue: { value: colorThemes[i].accentHue }, themeSaturation: { value: colorThemes[i].saturation }, themeBrightness: { value: colorThemes[i].brightness }, resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, }, }) // Create sphere with higher resolution for smoother effect const geometry = new THREE.SphereGeometry(2.2, 128, 128) const sphere = new THREE.Mesh(geometry, material) sphere.position.set(x, 0, z) // Add to scene and references sphereGroup.add(sphere) spheres.push(sphere) shaderMaterials.push(material) } spheresRef.current = spheres shaderMaterialsRef.current = shaderMaterials // Handle window resize const handleResize = () => { if (!cameraRef.current || !rendererRef.current) return cameraRef.current.aspect = window.innerWidth / window.innerHeight cameraRef.current.updateProjectionMatrix() rendererRef.current.setSize(window.innerWidth, window.innerHeight) // Update resolution uniform for all materials shaderMaterialsRef.current.forEach((material) => { material.uniforms.resolution.value.set(window.innerWidth, window.innerHeight) }) } window.addEventListener("resize", handleResize) // Animation loop const animate = () => { if (!sceneRef.current || !cameraRef.current || !rendererRef.current) return const currentTime = (Date.now() - startTimeRef.current) / 1000 // Detect beat if audio is playing let currentBeat = 0 if (isPlaying && analyserRef.current) { currentBeat = detectBeat() } // Update uniforms for all spheres shaderMaterialsRef.current.forEach((material) => { material.uniforms.time.value = currentTime material.uniforms.beat.value = currentBeat material.uniforms.beatEffect.value = beatEffect }) // Rotate spheres based on beat spheresRef.current.forEach((sphere, index) => { sphere.rotation.y = currentTime * 0.2 // Add a slight bounce effect based on beat const originalY = 0 sphere.position.y = originalY + currentBeat * beatEffect * 0.5 }) // Rotate the entire sphere group slowly if (sphereGroupRef.current) { sphereGroupRef.current.rotation.y = currentTime * 0.05 // Slow rotation } // Update controls if (controlsRef.current) { controlsRef.current.update() } // Render rendererRef.current.render(sceneRef.current, cameraRef.current) // Request next frame animationRef.current = requestAnimationFrame(animate) } // Start animation animationRef.current = requestAnimationFrame(animate) // Cleanup return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } window.removeEventListener("resize", handleResize) if (rendererRef.current && containerRef.current) { containerRef.current.removeChild(rendererRef.current.domElement) } // Dispose of geometries and materials spheresRef.current.forEach((sphere) => { sphere.geometry.dispose() if (sphere.material instanceof THREE.Material) { sphere.material.dispose() } }) } }, [detectBeat, isPlaying, beatEffect, createStars]) // Clean up audio resources useEffect(() => { return () => { if (sourceRef.current) { sourceRef.current.disconnect() } if (analyserRef.current) { analyserRef.current.disconnect() } if (audioContextRef.current) { audioContextRef.current.close() } } }, []) // Adjust beat sensitivity const handleSensitivityChange = (e: React.ChangeEvent) => { setBeatSensitivity(Number.parseFloat(e.target.value)) } // Adjust beat effect strength const handleEffectChange = (e: React.ChangeEvent) => { setBeatEffect(Number.parseFloat(e.target.value)) // Update all shader materials shaderMaterialsRef.current.forEach((material) => { material.uniforms.beatEffect.value = Number.parseFloat(e.target.value) }) } // Toggle controls visibility const toggleControls = () => { setShowControls(!showControls) } return (

About

Tags

Share

About

Tags

Share

More from yoheinishitsuji

More Templates Like This

About

Tags

Share

About

Tags

Share

More from yoheinishitsuji

More Templates Like This